<template>
	<view class="report_repair">
		<list-item showRight leftName="紧急"><u-switch v-model="emergency" size="40" slot="right" active-color="#009dff"></u-switch></list-item>
		<!-- 设备信息 -->
		<view class="m_title"><u-section title="设备信息" :right="false" line-color="#009dff" font-size="32"></u-section></view>
		<list-item showRight showBorderBottom leftName="设备">
			<view class="_select" slot="right" @click="toDeviceSelect">
				<text>{{ device.busNo || '请选择' }}</text>
				<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
			</view>
		</list-item>
		<list-item showBorderBottom leftName="信息">
			<view class="_info" slot="center">
				<text>{{ device.mac }}</text>
				<text>{{ device.no }}</text>
				<text>{{ device.busNo }}</text>
			</view>
		</list-item>
		<!-- 报修信息 -->
		<view class="m_title"><u-section title="报修信息" :right="false" line-color="#009dff" font-size="32"></u-section></view>
		<list-item showBorderBottom leftName="设备故障">
			<view class="_report" slot="center">
				<u-radio-group v-model="value" @change="radioGroupChange">
					<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name" :disabled="item.disabled" label-size="24">{{ item.name }}</u-radio>
				</u-radio-group>
			</view>
		</list-item>
		<view class="fault-detail">
			<text>故障原因</text>
			<u-tag
				style="margin:12rpx 6rpx 12rpx 24rpx;"
				v-for="(item, index) in faultList"
				:key="index"
				:text="item.name"
				shape="square"
				@click="faultTagClick(index)"
				:border-color="item.selected ? '#009dff' : '#f6f6f6'"
				:bg-color="item.selected ? '#009dff' : '#f6f6f6'"
				:color="item.selected ? '#ffffff' : '#666666'"
			></u-tag>
			<u-tag style="margin:12rpx 6rpx 12rpx 24rpx;" text="+其他原因" mode="dark" shape="square" @click="showBadPopus = true" bg-color="#f6f6f6" color="#666666"></u-tag>
		</view>
		<view class="fault-detail">
			<text>拍照</text>
			<view class="_photo" slot="center">
				<u-upload :custom-btn="true" ref="uUpload" :action="action" :file-list="fileList" :max-size="5 * 1024 * 1024" max-count="9" width="150" height="150" :before-upload="beforeUpload">
					<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
						<u-image width="62rpx" height="54rpx" :src="upload"></u-image>
					</view>
				</u-upload>
			</view>
		</view>
		<view class="fault-detail">
			<text>描述</text>
			<view class="describe" slot="center">
				<u-input v-model="inputValue" :type="type" :border="border" :height="height" :auto-height="autoHeight" :placeholder="inputPlaceholder" />
			</view>
		</view>
		<!-- 立即上报 -->
		<view class="botbutton"><u-button type="primary" shape="circle" @click="report" :custom-style="customStyle">立即上报</u-button></view>
		<!-- 故障原因弹出框 -->
		<u-modal v-model="showBadPopus" :mask-close-able="true" show-cancel-button @confirm="addBadValue" @cancel="badValue = ''">
			<view class="_bad" slot="default"><u-input class="_badInput" v-model="badValue" type="text" height="60" border placeholder="请输入故障原因" input-align="center" /></view>
		</u-modal>
	</view>
</template>

<script>
import listItem from './components/list-item.vue';
export default {
	components: {
		listItem
	},
	data() {
		return {
			customStyle: {
				background: '#009dff',
				marginBottom: '30rpx'
			},
			showBadPopus:false,
			badValue:'',
			upload: '../../../static/images/upload.png',
			inputValue: '',
			inputPlaceholder: '请详细描述设备故障问题，以便维修人员快速处理',
			type: 'textarea',
			border: true,
			height: 120,
			autoHeight: true,
			emergency: false,
			device: {},
			list: [
				{
					name: '机顶盒',
					disabled: false
				},
				{
					name: '屏幕',
					disabled: false
				},
				{
					name: '机顶盒+屏幕',
					disabled: false
				}
			],
			faultList: [
				{
					name: '接触不良',
					selected: false
				},
				{
					name: '保险脱离',
					selected: false
				},
				{
					name: '电源脱离',
					selected: false
				},
				{
					name: '视频头脱离',
					selected: false
				},
				{
					name: '无信号',
					selected: false
				}
			],
			selectFault: [],
			// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
			value: '机顶盒',
			action: 'http://www.example.com/upload',
			fileList: [
				// {
				// 	url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
				// }
			]
		};
	},
	onLoad(optios) {
		this.$EventBus.$on('deviceSelect', this.deviceSelect);
	},
	methods: {
		// 选中某个单选框时，由radio时触发
		radioChange(e) {
			// console.log(e);
		},
		// 选中任一radio时，由radio-group触发
		radioGroupChange(e) {
			// console.log(e);
		},
		//设备选择
		toDeviceSelect() {
			this.$u.route('/pages/deviceList/index');
		},
		deviceSelect(val) {
			console.log('deviceSelect============', val);
			this.device = val;
		},
		faultTagClick(index) {
			console.log(index)
			this.faultList[index].selected = !this.faultList[index].selected;
			console.log('faultTagClick', index);
		},
		beforeUpload(index, file) {
			return new Promise((resolve, reject) => {
				console.log(file,'file...............')
				// this.fileList.push(file)
				// this.$u
				// 	.post('url')
				// 	.then(res => {
				// 		// resolve()之后，将会进入promise的组件内部的then回调，相当于返回true
				// 		resolve();
				// 	})
				// 	.catch(err => {
				// 		// reject()之后，将会进入promise的组件内部的catch回调，相当于返回false
				// 		reject();
				// 	});
			});
		},
		// 添加故障原因
		addBadValue() {
			console.log(this.badValue);
			let item = {
				name: this.badValue,
				selected: true
			};
			this.faultList.unshift(item);
			this.badValue = '';
		},
		// 点击立即上报
		report() {
			let arr = [];
			this.faultList.forEach((item, index) => {
				item.selected && arr.push(item.name);
			});
			console.log(arr);
			console.log(this.faultList, 'faultList............');
			this.$u.route({
				url:'/pages/reportRepair/success'
			})
		}
	}
};
</script>

<style lang="scss" scoped>
	.report_repair {
		height: calc(100vh - env(safe-area-inset-bottom));
		height: 100vh;
		background-color: #f5f5f5;
		overflow-y: scroll;
	}
._select {
	text {
		color: #999999;
		margin-right: 20rpx;
	}
}

._info {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	padding: 0 30rpx;

	text {
		font-size: 28rpx;
		color: #999999;
	}
}

._report {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	margin-left: 60rpx;
	align-items: center;
}

._tag {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: wrap;
	padding: 0 30rpx;
	margin: 20rpx 0;

	._tagItem {
		margin: 10rpx 16rpx;
	}
}

._photo {
	padding: 0 30rpx;
	// margin: 0 20rpx 0 0;
	width: 100%;

	// ._photoIcon {
	// 	width: 160rpx;
	// 	height: 160rpx;
	// 	background-color: #fff;
	// 	border: 2rpx dashed #009dff;
	// 	display: flex;
	// 	justify-content: center;
	// 	align-items: center;
	// }
}

.describe {
	width: 100%;
	margin: 0 30rpx;
}

// .positon_bottom {
// 	position: fixed;
// 	bottom: env(safe-area-inset-bottom);
// 	left: 0;
// 	right: 0;
// 	height: 140rpx;
// 	background-color: #FFFFFF;
// 	display: flex;
// 	justify-content: center;
// 	align-items: center;
// }
.botbutton {
	background: #ffffff;
	padding: 30rpx;
}

.fault-detail {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	background: #ffffff;

	text {
		padding: 20rpx 30rpx;
		width: 100%;
		font-weight: bold;
	}

	::v-deep .u-size-default {
		font-size: 24rpx !important;
		padding: 14rpx 24rpx !important;
	}
}

.m_title {
	padding: 30rpx;
}
._bad {
	width: 400rpx;
	margin: 30rpx auto;
}
._badInput {
	width: 100%;
}
::v-deep .u-section__title__text {
	margin-left: 10rpx;
}

::v-deep .u-radio__label {
	margin-right: 30rpx !important;
	margin-left: 16rpx !important;
}

::v-deep .u-radio__icon-wrap--checked {
	background-color: #009dff !important;
	border-color: #009dff !important;
}

// 照片
// ::v-deep ._photo .u-list-item{
// 	border: 2rpx dashed #009dff;
// 	background-color: #fff;
// }

.slot-btn {
		width: 150rpx;
		height: 150rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		// background: rgb(244, 245, 246);
		background-color: #fff;
		border-radius: 10rpx;
		border: 2rpx dashed #009dff;
	}

	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}
</style>
